<script setup>
import axios from 'axios'
import { ElMessage } from 'element-plus'
import { ImageLayer, PointLayer, Scene } from '@antv/l7'
import { Map } from '@antv/l7-maps'
import { ref } from 'vue'
import { onMounted } from 'vue'
import {ClassType} from '../../util/type.js'
import { useUserStore } from '../../store/useUserStore.js'
import { url } from '../../util/urlconfig.js'
let scene

const {user}=useUserStore()
onMounted(()=>{
 scene = new Scene({
  id: 'map',
  map: new Map({
    center: [500, 500],
    zoom: 3,
    version: 'SIMPLE',
    mapSize: 1000,
    maxZoom: 5,
    minZoom: 2,
    pitchEnabled: false,
    rotateEnabled: false,
  }),
})
scene.setBgColor('rgb(94, 182, 140)')

const imagelayer = new ImageLayer({}).source(
  url,
  {
    parser: {
      type: 'image',
      extent: [360, 400, 640, 600],
    },
  },
)



scene.on('loaded', () => {
  getList()
  scene.addLayer(imagelayer)
})

})

const getList=async ()=>{
  const res= await axios.get('/adminapi/labs')
  // console.log(res)
  const list=res.data.map(item=>({
    x:item.x,
    y:item.y,
    t:'预约'+item.title,
    id:item.id
  }))
  addTextLayer(list)
}




// 取消
const handleCancel=()=>{
  // 重置表单
  bookingList.value={
    book_time: '',
  book_class: '',
  book_reason: '',
  }
  bookingRef.value.resetFields()
  showBookingDialog.value=false
  // console.log('取消')
  // 恢复禁用状态
  classDisable.value=[]
}

// 添加
const handeleAddBtn=()=>{
  // 进行校验
  bookingRef.value.validate(async (valid)=>{
    if(valid){
      
      await axios.post('/adminapi/books',{
        ...bookingList.value,
        lab_id:currentItem.value.id,
        book_username:user.username
      })
      
      // console.log(bookingList.value)
      // 成功之后
      ElMessage.success('预约成功,等待审核')
      // 调用取消方法
      handleCancel()
      
    }
  })

}

const addTextLayer=(data)=>{
        const textlayer = new PointLayer({ zIndex: 2 })
        .source(
          data,{
          parser: {
            type: 'json',
            x: 'x',
            y: 'y',
          },
        })
        .shape('t', 'text')
        .size(16)
        .active({
          color: '#00f',
          mix: 0.9,
        })
        .color('rgb(13, 71, 161)')
        .style({
          textAnchor: 'center', // 文本相对锚点的位置 center|left|right|top|bottom|top-left
          spacing: 2, // 字符间距
          fontWeight: '800',
          padding: [1, 1], // 文本包围盒 padding [水平，垂直]，影响碰撞检测结果，避免相邻文本靠的太近
          stroke: '#ffffff', // 描边颜色
          strokeWidth: 2, // 描边宽度
          textAllowOverlap: true,
        })
        textlayer.on('click',(e)=>{
          // 弹框开启
          currentItem.value=e.feature
          showBookingDialog.value=true
          // console.log(e)
          // console.log(currentItem.value)
        })
      scene.addLayer(textlayer)
}
const showBookingDialog=ref(false)
const currentItem=ref({})
const bookingRef=ref()
const bookingList=ref({
  book_time: '',
  book_class: '',
  book_reason: '',
})

const bookingRules = {
  book_time:[{required:true,message:'请选择预约时间',trigger:'blur'}],
  book_class:[{required:true,message:'请选择预约课件',trigger:'blur'}],
  book_reason:[{required:true,message:'请填写预约原因',trigger:'blur'}],
}


// 限制日
const disabledDate=(time)=>{
  // console.log(time)
  return time.getTime()<Date.now() || (time.getTime()) > (Date.now()+3600*24*1000*7)
  // return time.getTime() < Date.now() - 8.64e7
}

const classDisable =ref([])

// 改变日期
const handleSelectChange=async ()=>{
  // 重置
  // console.log(bookingList)
  // 优化处理 防止先选课节然后再选时间出现bug
  bookingList.value.book_class=''
  

    // console.log('改变了')
    // 给后端传递lab_id book_time  这个实验室 这个时间内的所有预约情况

    // get请求

    // post请求 book_time
  let res= await axios.post('/adminapi/books/select',{
    book_time:bookingList.value.book_time,
    lab_id:currentItem.value.id
  })

  // 禁用这些
classDisable.value= res.data.map(item=>item.book_class)
// console.log(classDisable.value)
// 接受课节数组  判断是否禁用

}
</script>

<template>
  <div>
    <div style="min-height: 100vh; justify-content: center;position: relative" id="map" />
    <!-- 预约实验室 -->
  <el-dialog
    v-model="showBookingDialog"
    width="540"
    align-center
    :title="currentItem.t"
  >
  <el-form
    ref="bookingRef"
    style="max-width: 1800px;margin-top: 20px;"
    :model="bookingList"
    status-icon
    :rules="bookingRules" 
    label-width="90"
    class="demo-ruleForm"

  >
    <el-form-item label="预约时间" prop="book_time"  >
   
        <el-date-picker
        @change="handleSelectChange"
         :disabled-date="disabledDate"
        v-model="bookingList.book_time"
        type="date"
        placeholder="请选择"
      style="width: 100%;"
      size="large"
      />
  
     
    </el-form-item>
    <el-form-item label="预约课件" prop="book_class">
      <el-select 
      placeholder="请选择课节" 
      v-model="bookingList.book_class" 
      size="large">
        <el-option v-for="item in ClassType" 
        :key="item.value"
         :label="item.label"
         :value="item.value"
      :disabled="classDisable.includes(item.value)"
         ></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="预约原因" prop="book_reason">
    <!-- 文本域 -->
     <el-input 
     v-model="bookingList.book_reason"
      type="textarea" 
      placeholder="请输入预约原因"
     ></el-input>
    </el-form-item>
  </el-form>


    <template #footer >
      <div class="dialog-footer" >
        <el-button type="primary" @click="handeleAddBtn()">
          添加
        </el-button>
        <el-button @click="handleCancel()">取消</el-button>
      </div>
    </template>
  </el-dialog>
  </div>
</template>

<style scoped>

</style>
